<template>
  <div class="Item">
<!-- <p>提示：{{$route.params}}</p> -->
<!-- <button @click="test">test</button> -->
 <div class="Item-header" style="background-color: white; height: 150px; display: flex;" >
  <div class="Item-logo" style="margin-left: 150px;">
    <img src="@/assets/logo.png" alt=""  style="width: 90px; margin-left: 40px; margin-top: 10px">
  <br>
  <span style="font-size: 24px; color: #66CDAA ;margin-left: 60px;">赣选</span>
  </div>
  <div class="Item-search" style=" margin-left: 700px; line-height: 150px;">
    <el-input   placeholder="瑞金咸鸭蛋" style="width: 200px;border: 3px solid  #66CDAA; border-radius: 5px; " />
  <el-button  style="background-color: #66CDAA;color: white" >搜索</el-button>

  <router-link to="/Shopping" target="_blank" style="">
 

<span>  <img src="@/assets/shopping.png" width="30" height="30" style="margin-left: 50px;" ></span>
</router-link>
  </div>

</div>
<div class="Item-daohang" style=" background-color: white;margin-top: 15px;">
 <span style="margin-left: 200px;"> {{Iteminformation.originName}}>{{Iteminformation.categoryName }}>{{Iteminformation.name}}</span>
</div>
<div class="Item-Center" style="border: 3px solid #66cdaa; border-radius: 5px;">
 <div class="Item-img" style="background-color: aqua; width: 400px;height: 400px;vertical-align:top ;margin-left: 200px;  " >
  <img :src="Iteminformation.photo" alt="" width="400" height="400">
 </div>
 <div class="Item-miaoshu" style=" width: 400px; height: 400px; text-align: center; ">
  <h2 style="margin-top: 50px;">{{Iteminformation.name }} </h2>
  <p>价格:¥{{Iteminformation.price }}元</p>
  <!-- <img id="pic" :src="img"  width="50px" @click="changeimg"> -->
  <el-input-number v-model="num" :min="1" :max="100"/>
  <br>
  <el-button style="background-color: #66cdaa;color: white; margin-top: 20px;">加入购物车</el-button>
 </div> 

 </div>
 <div class="Item-comment-header" style="text-align: center;">
    <h2>全部评论{{ commentsum }}条</h2>
  </div>
 <div class="Item-comment" v-for="(item,index1) in commentformation " :key="index1" style="border: 3px solid #66cdaa; border-radius: 5px" >
 
    <div class="Item-commentList" >
      <div class="Item-comment-left" >
        <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      <br>
      <span>nickname</span>
      </div>
     <div class="Item-comment-right">
     <div class="Item-comment-things" >
      <p style="text-align:left">{{item.time }}点赞总数{{ item.likenum }}</p>
      <p style="text-align:left">{{item.comments}} 评论共计{{ item.resnum }}条</p>
  <img v-if="item.islike" src="../assets/clicked.png" width="40px"  @click="commentchangeimg(index1)" style="margin-left: 900px;">
      <img v-else src="../assets/click.png" width="40px"  @click="commentchangeimg(index1)" style="margin-left: 900px;">
     </div>
     <div v-if="respondformation[index1]">
      <div class="Item-respond"  v-for="(item,index) in respondformation[index1][0] " :key="index"  >
         <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      /> 
       <span>nick回复:</span>
      {{ item.comments}}
      {{ item.time }}
       <!-- {{ item }}  -->
      <img v-if="item.islike" src="../assets/clicked.png" width="40px" style="margin-left: 60px;" @click='responddianzan(index1,index)'>
      <img v-else src="../assets/click.png" width="40px" style="margin-left: 60px;" @click='responddianzan(index1,index)'>
       <!-- <img v-else src="../assets/click.png" width="40px" style="margin-left: 60px;" @click="responddianzan(index)">  -->
      </div>
    </div> 
        <div><span v-if="item" @click="showall(index)">{{respondtishi}}</span>
           <span v-else >暂时无评论</span>
    </div>
 <div>
  <el-input v-model="respondform.comments" placeholder="请输入回复" size="normal" style="width: 940px; margin-top: 10px;">
  </el-input><el-button style="background-color: #66cdaa; color: white; margin-top: 10px;" @click="addrespond(index1) ">发表</el-button>
          
        </div>
     </div>
  </div>
 </div>
 <div style="margin: 0 auto; width: 1200px; text-align: center;">
          <h3>发表评论</h3>
          <el-input v-model="commentform.comments" placeholder="请输入评论"  style="width: 1200px;height: 100px;"></el-input>
          <el-button style="background-color: #66cdaa; color: white;"  @click="addcomment" >发表</el-button>
        </div>
  </div>
</template>

<script>
// import { toRaw } from 'vue';
import axios from '@/utils/request';
import {useUserStore} from '@/stores/user'
import { v4 as uuidv4 } from 'uuid';
import { ref } from 'vue';
export default {
name:'MyItem',
data(){
  return{
    // uuid: '',
    commentsum:'',
    respondcomments:[],
    respondcomments1:ref([]),
    user:useUserStore(),
    // respondtishi:'查看全部评论',
    // commentsum:'2',
    img:require('../assets/空心.png'),
commentimg:require('../assets/click.png'),
    value:{},
    num:1,
    id:1,
   Iteminformation:{},
   newformation:[],
   respondform:[
    {
      replyid:'',
      Nickname:'',
    time:'',
    comments:'',
     respondflag:false,
     islike:false,
    likenum:0,
    }
   ],
   commentform:[
    {id:'',
      Nickname:'',
      time:'',
      comments:'',
      islike:false,
      likenum:0,
      respondformation:[],
    }
   ],
   commentformation:[
//   {  
//     id:'zhansgansjhsh',
//     Nickname:"张三",
//     date:'2022-10-12',
//     comments:'十分推荐这家的商品',
//     flag:true,
//     respondformation:[
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:false,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//    ]
// },
// {  id:'zhangsandjskj',
//     Nickname:"张三",
//     date:'2022-10-12',
//     comment:'十分推荐这家的商品',
//     flag:true,
//     respondformation:[
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:false,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//     {
//     Nickname:'张三',
//     date:'2022-10-12',
//     content:'你家的东西真好吃冲冲冲',
//     flag:true,
//     },
//    ]
// },
   ],
   respondformation:ref([]),
}},
methods:{
  refresh() {
    location.reload();
  },
   test(){
  //  this.getreply()
  // this.respondcomments
  const a=JSON.parse(JSON.stringify(this.respondformation))
  console.log(a[0]);
  const b=JSON.parse(JSON.stringify(a[0]))
  console.log(b);
   console.log(JSON.parse(JSON.stringify(this.respondformation)));
  console.log(this.commentformation);
  //  const a= JSON.parse(JSON.stringify(this.respondformation));
  //  console.log(a[0][0][0].comments);
    // console.log(toRaw(this.respondformation));
    // this.newformation=toRaw(this.respondformation)
    // console.log(this.newformation);
   },
   getrespndcomments(){
    for(let i=0;i<this.respondformation.length;i++)
  {
    let j=0
    const b= JSON.parse(JSON.stringify(this.respondformation))
    if(b[i][0][j]!=null){
    while(b[i][0][j].comments)
    {
       j++
      this.respondcomments[i][j]=b[i][0][j].comments
      // console.log(1);
    }}
  }
   },
  addrespond(index1){
    let timer=new Date()
    // const times=JSON.stringify(time).replaceAll("/","-")
    this.respondform.Nickname=this.user.userInfo.userinformation.nickName
    const date=timer.toLocaleString()
    this.respondform.time=date.replaceAll('/','-')
    this.respondform.replyid='cm'+uuidv4()
    console.log(this.respondform);
    const parmas={
      proid:this.id,//商品id
      id:this.commentformation[index1].id,//评论id
      replyid:this.respondform.replyid,//回复的id
      time:this.respondform.time,//时间
      // respondid:this.commentformation[index1].id,
      userid:this.user.userInfo.userinformation.id,//回复人的id
      comments:this.respondform.comments ,//回复人的回复
    }
    // this.commentformation[index1].respondformation.push(this.respondform)
    this.respondform={}
   
    axios.post('/comments/sendonecommentreply',JSON.stringify(parmas))
   this.refresh()
  },
  addcomment(){
    const timer=new Date();
    this.commentform.Nickname=this.user.userInfo.userinformation.nickName
    const date=timer.toLocaleString()
    this.commentform.time=date.replaceAll('/','-')
    this.commentform.id=uuidv4()
    const parmas={
      proid:this.id,//商品id
      id:this.commentform.id,//评论id
      time:this.commentform.time,
      userid:this.user.userInfo.userinformation.id,//评论人id
      comments:this.commentform.comments ,//评论内容
    }
    this.commentformation.push(this.commentform)
   this.commentform={}
   axios.post('/comments/sendonecomments',JSON.stringify(parmas))
   this.refresh()
  },
  responddianzan(index1,index){
    console.log(index);
    const parmas={
      id:this.commentformation[index1].id,
      replyid:this.respondformation[index1][0][index].replyid,//点赞评论id
    likeid:this.user.userInfo.userinformation.id//点赞人的id
  }
  this.respondformation[index1][0][index].islike=!this.respondformation[index1][0][index].islike
  // this.commentformation[index1].respondformation[index].flag=!this.commentformation[index1].respondformation[index].flag
// console.log(1);
// this.commentformation[index1].respondformation[index].likenum++
axios.post('/clickliked_/clickonereply',JSON.stringify(parmas))
this.refresh()

  },
  showall(index){
    // csole.log(this.commentformation[index1].respondformation);
    this.commentsum=this.respondformation[index].length
    this.respondtishi='已经展示了所有评论'
  },
commentchangeimg(index){
  const parmas={
    proid:this.id,  
     id:this.commentformation[index].id,//点赞评论id
    likeid:this.user.userInfo.userinformation.id//点赞人的id
  }
 this.commentformation[index].islike=!this.commentformation[index].islike
//  this.commentformation[index].likenum++
 axios.post('/clickliked_/clickone',JSON.stringify(parmas))
 this.refresh()

},
  //后端
  
getxinxi(){
axios.post('/product/getonepro',JSON.stringify(this.id)).then(res=>{
  if(res.code===200)
  {
    this.Iteminformation=res.data
  }
})
  },
getcomment(){
  console.log(this.id);
  const parmas={
    proid:this.id,
    userid:this.user.userInfo.userinformation.id,
  }
  axios.post('/comments/selcomments',JSON.stringify(parmas)).then(res=>{
    console.log(res.data);
    this.commentformation=res.data
    this.commentformation=this.commentformation[0]
    console.log(this.commentformation);
    for(let i=0;i<this.commentformation.length;i++)
  {
    let parmas1={
    id:this.commentformation[i].id
  }
  // console.log(parmas);
  axios.post('/comments/selcommentreplysum',JSON.stringify(parmas1)).then(res=>{
    this.commentformation[i].resnum=res.data
  })
  this.getreply(i,this.commentformation[i].id)

}
for(let i=0;i<this.commentformation.length;i++){
  let parmas2={
    proid:this.id,
    id:this.commentformation[i].id,
  }
  axios.post('/clickliked_/selcommentlikesum',JSON.stringify(parmas2)).then(res=>{
    console.log(res.data);
    this.commentformation[i].likenum=res.data
  })}

console.log(this.respondformation);
  })

},
getreply(i,commentid){
  // console.log(this.commentformation.length);
  // for(let i=0;i<this.commentformation.length;i++){
  const parmas1={
id:commentid,
userid:this.user.userInfo.userinformation.id,
proid:this.id,
  }
  axios.post('/comments/selcommentreplys',JSON.stringify(parmas1)).then(res=>{
    console.log(res.data);
    const form=res.data
    console.log(form);
    this.respondformation[i]=JSON.parse(JSON.stringify(res.data));
    // this.respondformation[i].push(res.data)
    // this.$set(this, 'respondformation', res.data);
  })
},
getcommentsum(){
  const parmas={
    proid:this.id,
  }
 axios.post('/comments/selcommentsum',JSON.stringify(parmas)).then(res=>{
  console.log(res.data);
  this.commentsum=res.data
 })

},

  },
  
  mounted() {
  // console.log(this.$route.params.id);
  this.id=this.$route.params.id
  this.getxinxi(),
  this.getcomment(),
 this.getcommentsum()

 
  },
}
</script>

<style>
.Item-Center{
  display: flex;
  width: 1200px;
  height: 400px;
  margin: 0 auto;
  background-color: white;
  margin-top: 10px;
}
/* .Item-Center div{ */
  /* display: inline-block; */
  /* float: left; */
  /* line-height: -200px; */
/* } */
.Item-comment{
  text-align: center;
  margin: 0 auto;
  background-color: white;
  width: 1200px;
  margin-top: 20px;
}
.Item-commentList{
  display: flex;
  /* background-color: pink; */
  width: 1200px;
}
.Item-comment-left{
  width: 200px;
  height: 200px;
  /* background-color: green; */
  /* border: 4px solid #66cdaa; */
}
.Item-comment-right{
  
  width: 1000px;
  /* background-color: sandybrown; */
}
.Item-comment-things{
  /* background-color: salmon; */
  width: 1000px;
  height: 200px;
  border: 3px solid #66cdaa;
}
.Item-respond{
  text-align: left;
  /* background-color: aqua; */
  margin-top: 10px;
  border: 2px solid #66cdaa;
}
</style>